<template>
	<el-card>
		<el-form :inline="true">
			<el-form-item label="年度:">
				<el-date-picker v-model="queryParams.settingYear" type="year" format="YYYY" value-format="YYYY" style="width: 100%" />
			</el-form-item>

			<el-form-item>
				<el-button icon="Search" type="primary" @click="handleSearch">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>

	<el-card>
		<div style="text-align: right; margin-bottom: 10px">
			<el-button type="primary" @click="handshow">新增</el-button>
		</div>

		<el-table
			v-loading="loading"
			:data="dataList"
			stripe
			element-loading-background="rgba(0, 0, 0, 0.5)"
			element-loading-text="加载中..."
			header-row-class-name="table-header"
		>
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column label="复审年度" align="center" prop="settingYear" />
			<el-table-column label="截止日期" align="center" prop="deadLineTime"> </el-table-column>
			<el-table-column label="设定时间" align="center" prop="createTime">
				<template #default="scope">
					<span v-if="scope.row.createTime">{{ scope.row.createTime.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="设定用户" align="center" prop="createBy"> </el-table-column>
			<el-table-column label="当前状态" align="center">
				<template #default="scope">
					{{ scope.row.iFlag === 0 ? '无效' : '有效' }}
				</template>
			</el-table-column>
			<el-table-column label="启用状态" align="center" prop="activeStatus">
				<template #default="scope">
					<el-tag :type="scope.row.activeStatus === 0 ? 'success' : 'danger'">{{ scope.row.activeStatus === 0 ? '启用' : '作废' }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="80">
				<template #default="scope">
					<el-icon v-if="scope.row.activeStatus === 0" class="cursor" title="作废" :size="16" color="#fe6360" @click="handleDelete(scope.row)"
						><CircleClose
					/></el-icon>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			:current-page="pageInfo.pageIndex"
			:page-size="pageInfo.pageSize"
			:total="pageInfo.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		>
		</el-pagination>
	</el-card>

	<!-- 单个文件上传 -->
	<cmDialog v-model="showadd" modal-title="新增" width="600px">
		<el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="130px">
			<el-form-item label="编号">
				<el-input v-model="addForm.stageCode" placeholder="请输入内容" disabled />
			</el-form-item>
			<el-form-item label="申报年度" prop="settingYear">
				<el-date-picker v-model="addForm.settingYear" type="year" format="YYYY" value-format="YYYY" style="width: 100%" />
			</el-form-item>
			<el-form-item label="截止日期" prop="deadLineTime">
				<el-date-picker v-model="addForm.deadLineTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
			</el-form-item>

			<el-form-item label="有效" prop="">
				<el-switch v-model="addForm.activeStatus" :active-value="0" :inactive-value="1" disabled />
			</el-form-item>
		</el-form>

		<div style="margin-left: 65px">
			<div>设定用户:{{ userStore.user.username }}</div>
			<div style="margin-top: 6px">{{ time }}</div>
		</div>
		<div class="dialog-foot">
			<el-button @click="showadd = false">取消</el-button>
			<el-button type="primary" @click="submitaddForm(addFormRef)">确认</el-button>
		</div>
	</cmDialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { min } from 'xe-utils'
import cmDialog from '@/components/cm-dialog/index.vue'
import { querylistApi, saveOrUpdateApi, deleteApi } from '@/api/system/deadlineTime'
import moment from 'moment'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const queryParams = ref({ settingYear: '', activeStatus: '', stageCode: 'Review', remark: '', preparationType: '' })
const defaultFilter = ref({ settingYear: '', activeStatus: '', stageCode: 'Review', remark: '', preparationType: '' })
const queryForm = ref()
const datatimelist = ref([])
const dataList = ref([])
const pageInfo = ref({ pageIndex: 1, pageSize: 10, total: 0 })
const loading = ref(false)
const showadd = ref(false)
const addFormRef = ref()
const time = moment().format('YYYY-MM-DD')
const addForm = ref({
	id: '',
	settingYear: '',
	activeStatus: 0,
	deadLineTime: '',
	deadLineMonth: null,
	deadLineDay: null,
	stageCode: 'Review',
	remark: '复审截止时间',
	preparationType: null,
	settingType: 4
})
const addRules = ref({
	settingYear: [{ required: true, message: '请选择申报年度', trigger: 'blur' }],
	deadLineTime: [{ required: true, message: '请选择截止日期', trigger: 'blur' }]
})
const handleSearch = () => {
	getDataList()
}

const handshow = () => {
	const aa = {
		id: '',
		settingYear: '',
		activeStatus: 0,
		deadLineTime: '',
		deadLineMonth: null,
		deadLineDay: null,
		stageCode: 'Review',
		remark: '复审截止时间',
		preparationType: null,
		settingType: 4
	}

	addForm.value = aa
	showadd.value = true
}

const handleReset = () => {
	queryParams.value = { ...defaultFilter.value }
	pageInfo.value.pageIndex = 1
	dataList.value = []
	getDataList()
}
onMounted(() => {
	getDataList()
})

const getDataList = () => {
	loading.value = true

	const data = { ...queryParams.value, pageIndex: pageInfo.value.pageIndex, pageSize: pageInfo.value.pageSize }

	querylistApi(data).then(res => {
		loading.value = false
		dataList.value = res.data.list || []
		pageInfo.value.total = res.data.total || 0
	})
}

// const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
//   pageInfo.value.page = page;
//   pageInfo.value.limit = size;
//   list.value = [];
//   getuser_list();
// };
const handleSizeChange = (val: number) => {
	pageInfo.value.pageSize = val
	dataList.value = []
	getDataList()
}
const handleCurrentChange = (val: number) => {
	pageInfo.value.pageIndex = val
	dataList.value = []
	getDataList()
}

const submitaddForm = async (formRef: FormInstance) => {
	if (!formRef) {
		return
	}

	await formRef.validate((valid, fields) => {
		if (valid) {
			saveOrUpdateApi(addForm.value).then(() => {
				ElMessage({
					type: 'success',
					message: '操作成功'
				})
				showadd.value = false
				getDataList()
			})
		} else {
			if (!fields) {
				return
			}
		}
	})
}

const handleDelete = (row: any) => {
	ElMessageBox.confirm('是否确认作废?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		deleteApi({ id: row.id }).then(() => {
			ElMessage({
				type: 'success',
				message: '操作成功'
			})
			getDataList()
		})
	})
}
</script>

<style lang="scss" scoped>
.dialog-foot {
	display: inline-block;
	width: 100%;
	text-align: center;
}
</style>
